<template>
  <div class="translate-container side-nav-content">
    <div class="input">
      <theme-button size="mini" @click="translate">开始翻译</theme-button>
    </div>
    <span class="title">划线翻译</span>
    <div>
      <el-select v-model="form.fromLan" size="mini">
        <el-option
          v-for="item in translateOption"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        ></el-option>
      </el-select>
    </div>
    <div class="original">
      <el-input v-model="form.text" type="textarea" class="original-input" />
    </div>
    <div class="title">
      <i class="iconfont icon-xunhuan" @click="toggleLan" />
    </div>
    <div>
      <el-select v-model="form.toLan" size="mini">
        <el-option
          v-for="item in translateOption"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        ></el-option>
      </el-select>
    </div>
    <div class="code translate">
      <span>{{ translateResult }}</span>
      <i
        v-if="translateResult"
        class="iconfont icon-fuzhi"
        @click="copy(translateResult)"
      />
    </div>

    <div class="right-bottom">
      <!-- <div class="title">全文翻译</div> -->
      <!-- <div><el-select value="" size="mini"></el-select></div> -->
      <!-- <div class="opr-btn theme-btn-color">当前文献</div> -->

      <el-upload :action="action" hit="" accept=".docx" :on-success="onSuccess">
        <div class="opr-btn theme-btn-color">上传文献</div>
      </el-upload>
    </div>
  </div>
</template>

<script>
import { copy } from "@/utils/common";
import { fetchService } from "@/utils/common";

import { translateOption } from "../config";
const defaultForm = {
  text: "",
  fromLan: "english",
  toLan: "chinese",
};
export default {
  name: "Translate",
  props: {
    uploadCallback: {
      type: Function,
      default: new Function(),
    },
  },
  data() {
    return {
      copy,
      form: { ...defaultForm },
      translateOption,
      translateResult: "",
    };
  },
  computed: {
    action() {
      return `${process.env.VUE_APP_BASE_URL}/file/upload`;
    },
  },
  methods: {
    validate() {
      if (!this.form.text || !this.form.text.trim()) {
        this.$message.warning("请输入翻译内容！");
        return Promise.reject();
      }

      if (!this.form.fromLan) {
        this.$message.warning("请选择原文语言！");
        return Promise.reject();
      }

      if (!this.form.toLan) {
        this.$message.warning("请选择译文语言！");
        return Promise.reject();
      }

      return Promise.resolve();
    },
    translate() {
      this.validate().then(async () => {
        this.translateResult = "";
        const res = await fetchService("chat/translate/text", this.form);
        let a = true;
        const reader = res
          // eslint-disable-next-line no-undef
          .pipeThrough(new TextDecoderStream())
          .getReader();
        while (a) {
          var { value, done } = await reader.read();
          if (done) break;
          this.translateResult += value?.replace("undefined", "");
        }
      });
    },
    toggleLan() {
      const temp = this.form.fromLan;
      this.form.fromLan = this.form.toLan;
      this.form.toLan = temp;
    },
    onSuccess(res) {
      const url = res?.data?.url;
      url && this.uploadCallback(res?.data?.url);
    },

    // async test() {
    //   const response = await fetch(
    //     "http://quickpaper.top/api/chat/translate/text",
    //     {
    //       method: "POST",
    //       headers: { "Content-Type": "application/json" },
    //       body: JSON.stringify({
    //         fromLan: this.form.fromLan,
    //         text: this.form.text,
    //         toLan: this.form.toLan,
    //       }),
    //     }
    //   );
    //   let a = true;
    //   if (!response.body) return;
    //   console.log(response.body);
    //   const reader = response.body
    //     // eslint-disable-next-line no-undef
    //     .pipeThrough(new TextDecoderStream())
    //     .getReader();
    //   console.log(reader);
    //   while (a) {
    //     var { value, done } = await reader.read();
    //     if (done) break;
    //     value = value?.replace("undefined", "");
    //     console.log("received data -", value);
    //     // output.value += value?.replace("undefined", "");
    //     this.translateResult += value?.replace("undefined", "");
    //   }
    // },
  },
};
</script>

<style lang="less" scoped>
@import url("./common.less");
.dark-theme .translate-container {
  .translate .icon-fuzhi {
    color: #2f7756;
  }
}
.translate-container {
  display: flex;
  flex-direction: column;

  .title {
    .icon-xunhuan {
      font-size: 30px;
      cursor: pointer;
    }
  }
  .translate {
    position: relative;
    flex: 18;
    padding-bottom: 30px;
    .icon-fuzhi {
      position: absolute;
      right: 18px;
      bottom: 6px;
      font-size: 27px;
      color: var(--color-primary);
    }
  }
  .code {
    padding: 10px;
    margin-top: 16px;
    border-radius: 2px;
    background-color: var(--translate-code-background);
  }
  .original-input {
    margin-top: 16px;
    /deep/.el-textarea__inner {
      height: 200px;
      background-color: var(--translate-code-background);
    }
  }
  .right-bottom {
    padding-bottom: 46px;
    .opr-btn {
      margin-top: 23px;
      width: 189px;
      height: 54px;
      line-height: 54px;
      text-align: center;
      border-radius: 10px;
    }
  }
}
</style>
